<template>
	<!-- 签到 -->
	<view id="signIn">
		<!-- 身体 -->
		<view class="signIn_main">
			<view class="signIn_main_header">
				<view>规则</view>
				<view>我的现金</view>
			</view>
			<view class="signIn_main_price">
				<view>
					{{Number(money).toFixed(2)}}
					<text>元</text>
				</view>
			</view>
			<view class="signIn_main_signIn" v-if="receiveType == false" @click="receive">签到领现金</view>
			<view class="signIn_main_signIn" v-if="receiveType == true" @click="queryTos">签到已成功</view>
			<!-- 对话框样式 -->
			<view class="signIn_main_dialogBox">
				<!-- 小三角形 -->
				<view class="triangle"></view>
				<view class="signIn_main_dialogBox_today">今日签到可领取一个现金红包</view>
				<view class="signIn_main_dialogBox_rateProgress">
					<view :class="[day == 1 ?'on':'']">1天</view>
					<view></view>
					<view :class="[day == 2 ?'on':'']">2天</view>
					<view></view>
					<view :class="[day == 3 ?'on':'']">3天</view>
					<view></view>
					<view :class="[day == 4 ?'on':'']">4天</view>
					<view></view>
					<view :class="[day == 5 ?'on':'']">5天</view>
					<view></view>
					<view :class="[day == 6 ?'on':'']">6天</view>
					<view></view>
					<view>
						<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/treasure_box@2x.png" />
					</view>
				</view>
				<!-- 新人专享 -->
				<view class="new_pepople">
					<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/NoPath_new_people@2x.png" />
				</view>
			</view>
		</view>
		<view class="like" style="width: 100%;">
			<view class="liketitle">
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/left.png" mode=""></image>
				<text style="color: white;font-size: 28rpx;margin-left: 10rpx;margin-right: 10rpx;">你可能还喜欢</text>
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/right.png" mode=""></image>
			</view>

			<view class="likegoods">
				<view class="zy_content">
					<view v-for="item in contentlist" :key="item" class="zy_card">
						<image @tap="touch_card" :data-id="item.id" :src="item.images" :key="item" @click="godetails(item.id)" mode="widthFix"></image>
						<view @tap="touch_card" :data-id="citem.id" class="zy_bottom_view">
							<text class="zy_title">{{item.commodityName}}</text>
							<text class="zy_money">¥ {{item.currentPrice}}</text>
							<text class="zy_old">¥ {{item.originalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				receiveType: '', //判断签到
				contentlist: [],
				day: "", //判断签到天数
				money: "", //签到金额
			}
		},
		props: {
			flowlist: {
				type: Array
			}
		},
		mounted() {
			this.query()
		},

		onLoad() {
			this.getRecommend()
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			godetails(id) {
				uni.navigateTo({
					url: '../allbuy/Hotdetails?sid=' + id
				})
			},

			queryTos() {
				uni.showToast({
					title: '今日已经签过到了哦!',
					icon: "none",
				})
			},
			receive() {
				const requestParam = {
					url: "/api/account/sign/time",
					method: "GET",
					callBack: (res) => {
						if (res.code == 200) {
							uni.showModal({
								title: '提示',
								content: '今日签到成功',
								// cancelText: '取消',
								confirmText: '确定',
								success: res => {
									this.receiveType = true
									this.query();
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							})
						}
					}
				}
				this.$http.request(requestParam);
			},

			// 商品随机推荐
			getRecommend() {
				const requestRecommend = {
					url: `/api/commodity/randomCommodity/1/2`,
					method: "get",
					callBack: (res) => {
						this.text = 'request success';
						this.contentlist = res.data
					}
				}
				this.$http.request(requestRecommend)
			},

			query() {
				const requestParam = {
					url: "/api/account/selectTodaySignState",
					method: "GET",
					callBack: (res) => {
						if (res.code == 200) {
							this.receiveType = res.data.state;
							this.day = res.data.signCount;
							this.money = res.data.money;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							})
						}
					}
				}
				this.$http.request(requestParam);
			}
		}
	}
</script>

<style lang="less" scoped>
	#signIn {
		background-color: #FFC300 !important;

		// 头
		.signIn_header {
			display: flex;
			align-items: center;
		}

		// 身体
		.signIn_main {
			.signIn_main_header {
				position: relative;
				width: 100%;
				padding: 48rpx 0;
				text-align: center;
				color: #fff;
				font-size: 34rpx;

				view:first-child {
					position: absolute;
					left: 0;
					bottom: 48rpx;
					padding-left: 44rpx;
					font-size: 28rpx;
				}
			}

			.signIn_main_price {
				width: 100%;
				padding-bottom: 90rpx;
				text-align: center;

				view {
					display: inline-block;
					height: 114rpx;
					color: #fff;
					font-size: 100rpx;
					position: relative;
				}

				text {
					font-size: 48rpx;
					// position: absolute;
					// bottom: 0;
					// left: 72rpx;
				}
			}

			.signIn_main_signIn {
				margin: 0 20rpx;
				height: 100rpx;
				border-radius: 50rpx;
				border: 2rpx solid rgba(255, 235, 171, 1);
				background: linear-gradient(180deg, #fff5de 0%, #ffd492 100%);
				font-size: 56rpx;
				font-weight: bold;
				line-height: 100rpx;
				text-align: center;
				color: #276300;
			}

			// 对话框样式
			.signIn_main_dialogBox {
				margin-top: 44rpx;
				background: rgba(255, 255, 255, 0.25);
				position: relative;

				// 三角形
				.triangle {
					width: 0;
					height: 0;
					border: 26rpx solid transparent;
					border-bottom: 26rpx solid rgba(255, 255, 255, 0.25);
					position: absolute;
					top: -26rpx;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.signIn_main_dialogBox_today {
					font-size: 34rpx;
					color: #fff;
					padding: 0 40rpx;
					padding-top: 40rpx;
				}

				.signIn_main_dialogBox_rateProgress {
					padding: 0 40rpx;
					padding-top: 40rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.on {
						background-color: #ff8307 !important;
						box-shadow: 0 0 30rpx #ffda82 !important;
						color: #fff !important;
					}

					view:nth-child(odd) {
						width: 60rpx;
						height: 32rpx;
						background: #f25422;
						color: #fcae7a;
						font-size: 20rpx;
						text-align: center;
						line-height: 32rpx;
						border-radius: 16rpx;
					}

					// 线
					view:nth-child(even) {
						width: 44rpx;
						background: #f25422;
						height: 8rpx;
					}

					view:last-child {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						line-height: 52rpx;
						padding: 4rpx 12rpx;
						box-sizing: border-box;

						image {
							width: 30rpx;
							height: 24rpx;
						}
					}
				}

				// 新人专享
				.new_pepople {
					padding: 40rpx 40rpx 0 40rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.liketitle-img {
		width: 48rpx;
		height: 4rpx;
		margin-bottom: 4rpx;
	}

	.liketitle {
		margin-left: 32%;
		margin-top: 34rpx;
	}

	.like .likegoods {
		padding-bottom: 30rpx;
	}

	#signIn .like {
		background-color: #FFC300 !important;
	}

	.zy_content {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.zy_card {
		width: 344rpx;
		background-color: #fefefe;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 1px 1px 5px gray;
		margin-top: 20rpx;
	}

	.zy_card image {
		width: 344rpx;
		height: 352rpx !important;
		margin-bottom: 5rpx;
	}

	/* 底部卡片内容 */
	.zy_bottom_view {
		width: 100%;
		min-height: 100rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}

	.zy_title {
		display: inline-block;
		width: 90%;
		max-height: 70rpx;
		margin-left: 5%;
		margin-top: 10rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #252525;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.zy_money {
		display: block;
		width: 90%;
		margin-left: 5%;
		margin-top: 52rpx;
		color: #f35d3c;
		font-size: 32rpx;
		font-weight: bold;
	}

	.zy_old {
		display: block;
		width: 90%;
		margin-left: 40%;
		color: #acacac;
		font-size: 20rpx;
		margin-top: -30rpx;
		text-decoration: line-through;
	}
</style>
